<template>
    <BaseContent>
        <div class="card card_book_info" v-for="all_book in all_books.all_books[currentIndex]" :key="all_book.id">
            <div class="card-body">
                <span class="book_title">书名：{{ all_book.title }}</span>
                <span class="book_author">作者：{{ all_book.author }}</span>
                <span class="book_stock">库存：{{ all_book.stock }}</span>
                <button type="button" class="btn btn-danger btn-remove-book" @click="delete_a_book(all_book.id, all_book.title)">下架图书</button>
                <button type="button" class="btn btn-success btn-add-stock" @click="add_stock(all_book.score, all_book.title, all_book.id, all_book.stock)">增加库存</button>
            </div>
        </div>
       
        <nav aria-label="Page navigation example book-pagination" v-if="all_books.all_books.length !== 0">
            <ul class="pagination">
                <li class="page-item" :class="{ disabled: currentIndex === 0 }">
                    <a class="page-link" href="#" @click="go_to_page(currentIndex - 1)">上一页</a>
                </li>
                <li class="page-item" v-for="index in pageCount" :key="index" :class="{ active: index - 1 === currentIndex }">
                    <a class="page-link" href="#" @click="go_to_page(index - 1)">{{ index }}</a>
                </li>
                <li class="page-item" :class="{ disabled: currentIndex === pageCount - 1 }">
                    <a class="page-link" href="#" @click="go_to_page(currentIndex + 1)">下一页</a>
                </li>
            </ul>
        </nav>

        <div class="tanchuang" v-if="is_open_delete">
            <div class="mb-3">
                <div class="info_confirm">请确认是否是所下架书籍</div>
                    <input type="text" class="form-control" :placeholder="delete_book_name" disabled>
                </div>
            <div>
                <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="confirm_delete">确定</button>
                <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
            </div>
        </div>
        <div class="tanchuang" v-if="is_open_add">
            <div class="mb-3">
                <div class="info_confirm">请确认书籍名称是否正确</div>
                <input type="text" class="form-control" :placeholder="add_book_name" disabled>
                <div class="info_confirm">请输入增加库存的数量</div>
                <input type="text" class="form-control" v-model="add_stock_count">
            </div>
            <div>
                <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="confirm_add_stock">确定</button>
                <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
            </div>
        </div>
    </BaseContent>
</template>

<script>
import BaseContent from '@/components/BaseContent.vue';
import { reactive } from 'vue';
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
    name: "RemoveBookView",
    components: {
        BaseContent
    },
    setup() {
        const all_books = reactive({all_books: []});
        const store = useStore();
        const router = useRouter();
        const is_open_delete = ref(false);
        const delete_book_id = ref('');
        const delete_book_name = ref('');
        const add_stock_count = ref('');
        const add_book_score = ref('');
        const is_open_add = ref(false);
        const add_book_name = ref('');
        const add_book_id = ref('');
        const book_stock = ref('');
        let pageCount = ref(0);
        let currentIndex = ref(0);
        $.ajax({
            url: "http://47.121.28.202:8000/settings/getbooks/",
            type: "GET",
            success(resp) {
                let currentPage = [];
                for (let i of resp) {
                    if (currentPage.length < 15) {
                        currentPage.push(i);
                    } else {
                        all_books.all_books.push(currentPage);
                        currentPage = [i];
                    }
                }
                if (currentPage.length > 0) {
                    all_books.all_books.push(currentPage);
                }
                pageCount.value = all_books.all_books.length;
            }
        })

        const go_to_page = (pageIndex) => {
            if (pageIndex >= 0 && pageIndex < pageCount.value) {
                currentIndex.value = pageIndex;
            }
        }
        
        const delete_a_book = (book_id, book_name) => {
            is_open_delete.value = true;
            delete_book_id.value = book_id;
            delete_book_name.value = book_name;
        }
        

        const close = () => {
            is_open_delete.value = false;
            is_open_add.value = false;
        }

        const confirm_delete = () => {
            if (store.state.user.is_login) {
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/getbooks/",
                    type: "DELETE",
                    headers: {
                        'Authorization': "Bearer " + store.state.user.access,
                    },
                    data: {
                        id: parseInt(delete_book_id.value),
                    },
                    success() {
                        is_open_delete.value = false
                        all_books.all_books = all_books.all_books.map(page => page.filter(book => book.id !== parseInt(delete_book_id.value)));  
                        all_books.all_books = all_books.all_books.filter(page => page.length > 0);
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        const add_stock = (book_score, book_name, book_id, bookstock) => {
            is_open_add.value = true;
            add_book_score.value = book_score;
            add_book_name.value = book_name;
            add_book_id.value = book_id;
            book_stock.value = bookstock;
        }

        const confirm_add_stock = () => {
            if (store.state.user.is_login) {
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/getbooks/",
                    type: "PATCH",
                    headers: {
                        'Authorization': "Bearer " + store.state.user.access,
                    },
                    data: {
                        book_id: parseInt(add_book_id.value),
                        score: parseInt(add_book_score.value) + 5,
                        stock: parseInt(add_stock_count.value) + parseInt(book_stock.value),
                    },
                    success() {
                        is_open_add.value = false;
                        add_stock_count.value = "";
                        window.location.reload();
                    }
                })
            }
        }

        return {
            all_books,
            pageCount,
            currentIndex,
            go_to_page,
            delete_a_book,
            confirm_delete,
            is_open_delete,
            close,
            delete_book_name,
            add_stock,
            is_open_add,
            add_stock_count,
            add_book_score,
            add_book_name,
            confirm_add_stock,
            add_book_id
        }
    }
}
</script>

<style scoped>
.errorinfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card_book_info {
    margin-bottom: 10px;
}
.book_title {
    margin-right: 30px;
}
.pagination {
    position: relative;
    left: 500px;
}
.book_author {
    margin-right: 30px;
}
.btn-remove-book {
    float: right;
    margin-left: 10px;
}
.btn-add-stock {
    float: right;
    margin-right: 10px;
}
.tanchuang {
    position: fixed;
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%);  
    height: 350px;  
    width: 500px;  
    background-color: rgba(211, 211, 211, 0.9);
    z-index: 1000;  
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;  
    padding: 20px;  
    box-sizing: border-box;
    border-radius: 10px;
}
.btn-tanchuang {
    margin: 10px;
}
</style>